<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>

    <!-- bootstorp 引入所需css js -->
    <link rel="stylesheet" href="js/bootstrap/bootstrap3/css/bootstrap.css">
    <link rel="stylesheet" href="js/bootstrap/bootstrap3/css/bootstrap-theme.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap/bootstrap3/js/bootstrap.js"></script>
    <link rel="stylesheet" href="js/bootstrap/bootstrap-treeview/bootstrap-treeview.min.css">
    <script type="text/javascript" src="js/bootstrap/bootstrap-treeview/bootstrap-treeview.min.js"></script>
    <link rel="stylesheet" href="js/bootstrap/bootStrap-addTabs/bootstrap.addtabs.css">
    <script type="text/javascript" src="js/bootstrap/bootStrap-addTabs/bootstrap.addtabs.min.js"></script>
    <link rel="stylesheet" href="js/bootstrap/bootstrap-table/bootstrap-table.css">
    <script type="text/javascript" src="js/bootstrap/bootstrap-table/bootstrap-table.js"></script>
    <script type="text/javascript" src="js/bootstrap/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <script type="text/javascript" src="js/bootstrap/bootstrap-bootbox/bootbox.js"></script>
    <link rel="stylesheet" href="js/bootstrap/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css"></link>
    <script type="text/javascript" src="js/bootstrap/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="js/bootstrap/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <link rel="stylesheet" href="js/bootstrap/bootstrap-fileinput/css/fileinput.css"></link>
    <script type="text/javascript" src="js/bootstrap/bootstrap-fileinput/js/fileinput.js"></script>
    <script type="text/javascript" src="js/bootstrap/bootstrap-fileinput/js/locales/zh.js"></script>
    <link rel="stylesheet" href="js/bootstrap/bootstrap-switch-master/dist/css/bootstrap3/bootstrap-switch.css"></link>
    <link rel="stylesheet" href="js/bootstrap.min.css">
    <link href="js/app.css" rel="stylesheet">

    <style>


    </style>

</head>

<body>

<div class="container">
    <!-- 页面主体 -->
        <div class="container-fluid" style="border: 5px solid gainsboro;background-color: white; height: 300px ;width: 700px">
            <!-- 表单部分 -->
            <form class="form-horizontal" id="biaodan" >
                <p>&nbsp;</p><p>&nbsp;</p>
                <div class="form-group" id="passwordDiv">
                    <label class="col-sm-3 control-label"><h1>新密码:</h1></label>
                    <div class="col-sm-4">
                            <input type="hidden" id="userId">
                            <input type="password" class="form-control" id="password" name="cuspassword" onchange="newpassword()" placeholder="请输入新密码" style="height: 40px">
                           <!-- <input type="hidden" class="form-control" id="id" name="id">-->
                    </div>
                    <label class="col-sm-2 control-label" id="passwordMsg"></label>
                </div>
                <div class="form-group" id="repasswordDiv">
                    <label class="col-sm-3 control-label"><h1>确认新密码</h1></label>
                    <div class="col-sm-4">
                        <input type="password" class="form-control" id="repassword" onchange="repassword()" placeholder="请输入确认新密码"  style="height: 40px">
                    </div>
                    <label class="col-sm-2 control-label" id="repasswordMsg"></label>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label"><h1>邮箱</h1></label>
                    <div class="col-sm-4">
                        <input type="email" class="form-control" id="email" name="email" placeholder="请输入您的邮箱"  style="height: 40px">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <!--btn-lg变大一点-->
                        <input type="submit" class="btn btn-danger btn-lg" value=" 确 认 修 改 ">
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- 网站底部 -->
    <div class="row">
        <div class="col-xs-6">
            <img src="" width="100%"/>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 text-center">
            <ul class="list-inline">
                <li><a href="javascript:void(0);">联系我们</a></li>
            </ul>
        </div>
    </div>
</div>


</body>


<script>

    //密码和确认密码一致性效验
    function checkPwdAndRepwd(f1,f2){
        //密码
        //前提密码和确认密码必须填写
        if(f1&&f2){
            var pwd = document.getElementById("password").value ;
            var repwd = document.getElementById("repassword").value ;
            var msg = document.getElementById("repasswordMsg") ;
            var div = document.getElementById("repasswordDiv") ;
            //2.一致性判断
            if(pwd==repwd){
                msg.innerHTML = "" ;
                div.className +=" form-group" ;
                return true ;
            }else{
                div.className = " has-error" ;
                msg.innerHTML = "必须和密码一致" ;
                return false ;
            }
        }else{
            return false ;
        }
    }
    function checkNotNull(nid){
        //1.获取用户名菜单输入项 元素对象
        var nodex = document.getElementById(nid) ;
        //2.获取对应的错误信息回显 label对象
        var msg = document.getElementById(nid+"Msg") ;
        //3.获取对应的div
        var div = document.getElementById(nid+"Div") ;
        var reg = /^\s*$/ ;//如果0~多个空白符，就为true
        if (reg.test(nodex.value)) {
            //用户名信息不合格
            msg.innerHTML = "不能为空" ;
            //如果错误及获取id更改class样式
            div.className +=" has-error" ;
            return false ;
        } else{
            //用户名合格
            div.className = " form-group" ;
            msg.innerHTML = "" ;
            return true ;
        }
    }
    //表单验证方法
    function checkForm(){
        //密码
        var flag2 = checkNotNull("password") ;
        //确认密码
        var flag3 = checkNotNull("repassword") ;
        //一致性效验
        var flag4 = checkPwdAndRepwd(flag2,flag3) ;
        return flag2&&flag3&&flag4 ;
    }



</script>
</html>